<html xmlns="http://www.w3.org/1999/xhtml" id="advanced-views">
<head>
    <title>Chapter Title</title>
</head>

<body>

<h1> Put Chapter title in h1 </h1>
 
<p>   Some text summarizing what the chapter is about</p>

<!--=========================================================================-->
<!-- Major sub-heads in h2, etc                                                               -->
<!--=========================================================================-->
<h2><a name="overview">Overview</a></h2>

<p>This-a-here chapter is about this subject. Here is how you format code that is not "live."</p>

<example extract="false">
  &lt;connectiondatasource name="one"&gt;
      &lt;dataset name="message"&gt;
      &lt;dataset name="alert"&gt;
  &lt;/connectiondatasource&gt;

  &lt;connectiondatasource name="two"&gt;
      &lt;dataset name="stock"&gt;
      &lt;dataset name="alert"&gt;
  &lt;/connectiondatasource&gt;
</example>


<p>Use the " code"<code>one.alert</code> <todo>this doesn't make sense</todo> tag to format code inline.</p>


<!--=========================================================================-->
<!-- Comments are appreciated!                                                  -->
<!--=========================================================================-->
<h2><a name="sometopic">Some Topic</a></h2>

<p>This is how to include "live" examples. </p>
<h3> <a name="subtopic1">subtopic1 </a></h3> 
<example class="code" title="Simple connection manager">
  &lt;canvas height="120" debug="true"&gt;
      &lt;connection /&gt;
      &lt;script&gt;
          Debug.write('my connection manager: ' + canvas.connection);
      &lt;/script&gt;
  &lt;/canvas&gt;
</example>

<!-- See other chapters in the D3 guide and also the wiki for more informtion on formatting chapters --> 
<!-- Here is a list of some topics you may want to discuss in this chapter-->
<fixme>
It is documented in the layout docs -- in the comment at the top of the
class and on the addSubview method, but nowhere in view. I guess this is a
problem with options in general -- they really go between one object and
another.

If you want a view to not
participate in the layout, you can set the attribute:
options="ignorelayout" -- 

</fixme>
<fixme>
DEFAULT PLACEMENT 


In the tutorial example below, you indicate that we have to use
immediateparent instead of parent. I tried with parent and it seems to
work fine. I have never had to use immediateparent in the samples I have
built, so I'm still not clear on the difference between the two. Can you
think of an example where parent does not work?

 <?ignore
<canvas>
  <window x="20" y="20" width="200" height="250"
          title="Boring Window" resizable="true">
    <simplelayout axis="y" spacing="10" />
    <text>Here is some text.</text>
    <text>I could ramble for hours.</text>
    <button x="immediateparent.width / 2">
      Example Button
    </button>
  </window>
</canvas>
?>
The short answer to your question   is that if you changed the
immediateParent to parent in the x constraint on the button below, it would be
wrong -- though you probably wouldn't see the problem, since the width of the
left side of the window is relatively small.

Here's the longer answer:
immediateParent applies to container classes.

If you imagine the structure of the window, it's got a lot of internal
views. When you put a button inside a window, you're actually putting it
inside one of the views inside the window -- like
window.middle.center.content. The parent for the button would be the
window (the parent is the tag's lexical parent -- what you wrote in your
source.) But the immediateParent would be the content view -- the actual
object that's one step up from the button in the view hierarchy.

Here's a simpler example. Let's say I want to write a frame class that makes a
blue 1 pixel border around any view you put inside it.

To start, I'd write this:
<?ignore
    <class name="myframe" bgcolor="blue">
        <attribute name="width" value="${contents.width+2}"/>
        <attribute name="height" value="${contents.height+2}"/>
        <view name="contents" x="1" y="1"/>
    </class>
?>
That's all well and good, but if I write this:
<?ignore
    <myframe>
        <myimage/>
    </myframe>
?>
myimage would just be a child of myframe, and you wouldn't see the border at
all (since content would have 0 size.) We need to use placement here, so that
myframe by default puts its contents in the view named "content". We can do
this by adding a defaultPlacement to the class. (Note the use of double
quotes -- defaultPlacement isn't in the schema for whatever reason.)
<?ignore
    <class name="myframe" bgcolor="blue">
        <attribute name="width" value="${contents.width+2}"/>
        <attribute name="height" value="${contents.height+2}"/>
        <attribute name="defaultPlacement" value="'contents'"/>
        <view name="contents" x="1" y="1"/>
    </class>
?>
Now, given the view hierarchy above, myimage's parent would be the top of
the myframe class; its immediateParent would be the 'contents' view within
the class.

So another way of saying it is that immediateParent is the parent by placement.

There are more sophisticated ways to use placement -- views can specify a
placement attribute, which is essentially a processing instruction to the
container. The container can also override the LzNode determinePlacement method
to, say, add constraints to a child a view or reposition it within a layout.

No one liked 'immediateParent' but we could never think of anything better.

A






</fixme>
</body>
</html>
<!-- * X_LZ_COPYRIGHT_BEGIN ***************************************************
* Copyright 2001-2004 Laszlo Systems, Inc.  All Rights Reserved.              *
* Use is subject to license terms.                                            *
* X_LZ_COPYRIGHT_END ****************************************************** -->
